<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- saved from url=(0014)about:internet -->
    <title>Jam-Demo</title>
    <style type="text/css">
        .item {
            width: 300px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            font-weight: 500;
            color: white;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript" src="../js/jam-0.1a-branch.js"></script>
    <script type="text/javascript">
        $(function () {
            var cura = null,cura2 = null;
            $('#showBtn').click(function(){
               $('#showAndHide').show();
            });
            $('#hideBtn').click(function(){
                $('#showAndHide').hide();
            });

            $('#clickBtn').click(function () {
                if (!cura) {
                    cura = animate;
                }
                cura.start();
            });
            $('#clickBtn2').click(function () {
                cura && cura.pause();
            });
            var an = $('#aa1').animate({
                from: {left: '0px'},
                to: {left: '300px'},
                sec: 500
            }).nextAnimate('#aa2',
                    {
                        from: {left: '400px'},
                        to: {left: '1000px'},
                        sec: 1700,
                        callback: function () {
                            an2.start();
                            cura2 = an2;
                        },
                        upgradeFunc: function (r) {
                            var obj = {left: 400 + (600 * Math.sin(Math.PI / 2 * r))};
                            obj.left += 'px';
                            return obj;
                        }
                    },true);
            cura2 = an;
            var an2 = $('#aa2').animate({
                from: {left: '1000px'},
                to: {left: '400px'},
                sec: 800 ,
                callback : function(){
                    an.start();
                    cura2 = an;
                }}).nextAnimate('#aa1',
                    {
                        from: {left: '300px'},
                        to: {left: '0px'},
                        sec: 500
                    },true);
            $('#cb1').click(function () {
                if (!cura2) {
                    cura2 = an;
                }
                cura2.start();
            });
            $('#cb2').click(function () {
                cura2 && cura2.pause();
            });
            $('#cb3').click(function () {
                var fn = parseInt($('#fn').val(),10);
                var sec = parseInt($('#sec').val(),10);
                fn && sec && cura2.fb(fn,sec,function(){
                    this.pause()
                });
            });
            var animate = $('#a1').animate({
                from: {left: '0px'},
                to: {left: '300px'},
                sec: 500
            }).nextAnimate('#a2',
                    {
                        from: {left: '400px'},
                        to: {left: '1000px'},
                        sec: 1700,
                        callback: function () {
                            animate2.start();
                            cura = animate2;
                        },
                        upgradeFunc: function (r) {
                            var obj = {left: 400 + (600 * Math.sin(Math.PI / 2 * r))};
                            obj.left += 'px';
                            return obj;
                        }
                    });

            var animate2 = $('#a2').animate({
                from: {left: '1000px'},
                to: {left: '400px'},
                sec: 800 }).nextAnimate('#a1',
                    {
                        from: {left: '300px'},
                        to: {left: '0px'},
                        sec: 500,
                        callback: function () {
                            animate.start();
                            cura = animate;
                        }
                    });
            $('#cbInfo').append('<p>an1 FN:' + an.ctx.fn + ',' + an.g.ctx.fn + '</p>')
                    .append('<p>an2 FN:' + an2.ctx.fn + ',' + an2.g.ctx.fn + '</p>');
        });

        $(window).load(function(){
            $('#crs').carouselInit();
        });
    </script>
</head>
<body style="overflow-x: hidden">
<h1>Jam-Demo</h1>

<h3>$(expr).show(),$(expr).hide()</h3>

<div style="width: 100%;height: 100px;padding: 10px;position: relative">
    <div id="showAndHide" style="position: absolute;width: 100px;height: 80px;left: 0;top:0;background: green">

    </div>
</div>

<button id="showBtn" value="start!">show!</button>

<button id="hideBtn" value="start!">hide!</button>

<h3>$(expr).animate(config).nextAnimate(expr,config,false)</h3>

<div style="width: 100%;height: 100px;padding: 10px;position: relative">
    <div id="a1" style="position: absolute;width: 100px;height: 80px;left: 0;top:0;background: green">

    </div>
    <div id="a2" style="position: absolute;width: 100px;height: 80px;left: 400px;top:0;background: orange">

    </div>
</div>

<button id="clickBtn" value="start!">start!</button>

<button id="clickBtn2" value="start!">pause!</button>

<h3>$(expr).animate(config).nextAnimate(expr,config,true)</h3>

<div style="width: 100%;height: 100px;padding: 10px;position: relative">
    <div id="aa1" style="position: absolute;width: 100px;height: 80px;left: 0;top:0;background: green">

    </div>
    <div id="aa2" style="position: absolute;width: 100px;height: 80px;left: 400px;top:0;background: orange">

    </div>
</div>
<div id="cbInfo"></div>
<button id="cb1" value="start!">start!</button>
<button id="cb2" value="start!">pause!</button>
<input type="text" id="fn" placeholder="指定帧">
执行时间：
<select id="sec">
    <option value="200" selected>200</option>
    <option value="300">300</option>
    <option value="500">500</option>
</select>
<button id="cb3" value="start!">forward/backward</button>

<h3>$(expr).carouselInit(config)</h3>

<div id="crs" style="width: 320px;height: 220px;position: relative;overflow: hidden;margin: 10px">
    <div id="b1" style="background: green;" class="item">
        A
    </div>
    <div id="b2" style="background: orange;" class="item">
        B
    </div>
    <div id="b3" style="background: red;" class="item">
        C
    </div>
</div>


</body>
</html>